<template>
    <div>
      <el-tabs v-model="activeName" >
          <!-- IPv4防火墙 -->
        <el-tab-pane label="IPv4防火墙" name="first">
            <!-- 动作 -->
            <div class="action">
                <h2>动作</h2>
                <ul>
                    <li><a href="">复位计数器</a></li>
                    <li><a href="">重启防火墙</a></li>
                </ul>
            </div>
            <!-- 表 -->
            <div class="Filter">
                <!-- 链INPUT -->
                <div class="Filter_header"><h2>表：Filter</h2></div>
                <div>
                    <div class="table_head">
                        链<i>INPUT</i>(策略：<i>ACCEPT</i>,数据包：0,流量：0.00B)
                    </div>
                    <el-table :data="inputTableData" stripe style="width: 100%" >
                        <el-table-column prop="rules" label="规则" width="100"></el-table-column>
                        <el-table-column prop="dataBag" label="数据包" width="100"></el-table-column>
                        <el-table-column prop="flow" label="流量" width="100"></el-table-column>
                        <el-table-column prop="object" label="对象" width="200"></el-table-column>
                        <el-table-column prop="agreement" label="协议" width="100"></el-table-column>
                        <el-table-column prop="sign" label="标识" width="100"></el-table-column>
                        <el-table-column prop="entrance" label="入口" width="100"></el-table-column>
                        <el-table-column prop="exit" label="出口" width="100"></el-table-column>
                        <el-table-column prop="sourceAddress" label="源地址" width="100"></el-table-column>
                        <el-table-column prop="targetAddress" label="目标地址" width="100"></el-table-column>
                        <el-table-column prop="option" label="选项" width="100"></el-table-column>
                    </el-table>
                </div>
                <!-- 链FORWARD -->
                <div>
                    <div class="table_head">
                        链<i>FORWARD</i>(策略：<i>DROP</i>,数据包：0,流量：0.00B)
                    </div>
                    <el-table :data="forwordTableData" stripe style="width: 100%" >
                        <el-table-column prop="rules" label="规则" width="100"></el-table-column>
                        <el-table-column prop="dataBag" label="数据包" width="100"></el-table-column>
                        <el-table-column prop="flow" label="流量" width="100"></el-table-column>
                        <el-table-column prop="object" label="对象" width="200"></el-table-column>
                        <el-table-column prop="agreement" label="协议" width="100"></el-table-column>
                        <el-table-column prop="sign" label="标识" width="100"></el-table-column>
                        <el-table-column prop="entrance" label="入口" width="100"></el-table-column>
                        <el-table-column prop="exit" label="出口" width="100"></el-table-column>
                        <el-table-column prop="sourceAddress" label="源地址" width="100"></el-table-column>
                        <el-table-column prop="targetAddress" label="目标地址" width="100"></el-table-column>
                        <el-table-column prop="option" label="选项" width="100"></el-table-column>
                    </el-table>
                </div>
                <div class="Filter_footer">
                    <div>
                        状态
                    </div>
                    <div style="margin-right:500px;">
                        IPv6网址导航www.ipv6du.com
                    </div>
                </div>
            </div>
            <!-- 系统 -->
            <div class="system">
                <div class="system_header"><h2>系统</h2></div>
                <div class="system_table">
                    <div class="table_item" v-for="(item,index) in system_table" :key="index">
                        <div class="table_item_title">{{item.title}}</div>
                        <div class="table_item_content">{{item.content}}</div>
                    </div>
                </div>
            </div>
        </el-tab-pane>
        <!-- IPv6防火墙 -->
        <el-tab-pane label="IPv6防火墙" name="second">Ipv6防火墙</el-tab-pane>
        
        </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'first',
            inputTableData:[
                {
                    rules:'1',
                    dataBag:'2967799',
                    flow:'2.89GB',
                    object:'delegate_input',
                    agreement:'all',
                    sign:'-',
                    entrance:'*',
                    exit:'*',
                    sourceAddress:'0.0.0.0/0',
                    targetAddress:'0.0.0./0',
                    option:'-'
                }
            ],
            forwordTableData:[
                {
                    rules:'1',
                    dataBag:'2967799',
                    flow:'2.89GB',
                    object:'delegate_input',
                    agreement:'all',
                    sign:'-',
                    entrance:'*',
                    exit:'*',
                    sourceAddress:'0.0.0.0/0',
                    targetAddress:'0.0.0./0',
                    option:'-'
                }
            ],
            system_table:[
                {
                    title:"主机名",
                    content:"BW"
                },
                {
                    title:"主机型号",
                    content:"BW BE46-MINI"
                },
                {
                    title:"用户ID",
                    content:"A9A6A9A6A9A6A9A6A9A6A9A"
                },
                {
                    title:"固件版本",
                    content:"3.18.45"
                },
                {
                    title:"版本",
                    content:"2.4.3.8"
                },
                {
                    title:"本地时间",
                    content:"Fri Jun 11 13.57.17 2021"
                },
                {
                    title:"运行时间",
                    content:"12d 18h 23m 5s"
                },
                {
                    title:"平均负载",
                    content:"0.24,0.08,0.03"
                }
            ]
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
};
</script>

<style scoped lang="less">
.action{
    li{
        a{
            color: #007ACC;
            text-decoration: none;
        }
        
    }
}
.Filter{
    margin-top: 40px;
    .table_head{
        height: 50px;
        background: #F1F3F4;
        font-weight: 600;
        padding-left: 10px;
        line-height: 50px;
    }
    .Filter_footer{
        display: flex;
        width: 100%;
        height: 50px;
        justify-content: space-between;
        color: #007ACC;
        
    }
}
.system{
    .system_header{
        border-bottom: 1px solid #EBEEF5;
    }
    .system_table{
        width: 100%;
        .table_item{
            height: 50px;
            width: 100%;
            border-bottom: 1px solid #EBEEF5;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            line-height: 50px;
            .table_item_title{
                width: 600px;
                height: 100%;
                
            }
            
        }
    }
}
</style>
